<template>
  <div class="city">
    <CityHeader></CityHeader>
    <CitySearch :cities="data1.data.cities" v-if="data1.data"></CitySearch>
    <CityList :cities="data1.data.cities" :hot="data1.data.hotCities" :letter="letter" v-if="data1.data" @current="handleCurrent"></CityList>
    <CityAlphabet :currentIndex="currentIndex" :cities="data1.data.cities" v-if="data1.data" @change="handleLetterChange"></CityAlphabet>
  </div>
</template>

<script type="text/ecmascript-6">
import axios from 'axios'
import CityHeader from './components/header.vue'
import CitySearch from './components/search.vue'
import CityList from './components/list.vue'
import CityAlphabet from './components/Alphabet.vue'
export default{
    components:{
      CityHeader,
      CitySearch,
      CityList,
      CityAlphabet
    },
    data(){
      return{
        data1:{},
        letter:'',
        currentIndex:0
      }
    },
    mounted(){
      axios.get('/api/city.json').then((response) => {
        this.data1=response.data
      })
    },
    methods:{
      handleLetterChange(obj){
        this.letter=obj
      },
      handleCurrent(obj){
        this.currentIndex=obj
      }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">

</style>
